import { AutoComplete, Button, Divider, Input } from 'antd';
import React, { useRef } from 'react';
import { getObject, toast, apis } from "@/service/common";
import "./index.css";

interface LogProps {
    license: string;
    url: string;
}

const logNames = [
    { value: 'info.log' },
    { value: 'error.log' },
    { value: 'debug.log' },
];

const Db: React.FC<LogProps> = ({ license, url }) => {
    const [logs, setLogs] = React.useState<string[]>([]);
    const [n, setN] = React.useState<number>(500);
    const [name, setName] = React.useState<string>("info.log");
    const divRef = useRef(null);

    const downloadLog = () => {
        const a = document.createElement('a');
        a.href = `${url}/fw/ytcheck/delpoy/log/save/${license}` + `?name=${encodeURIComponent(name)}`;
        a.download = name;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }

    const getLogs = () => {
        toast.loading();
        const params = {
            n: n,
            name: name
        }
        // 这里可以添加获取日志的逻辑
        getObject({ url: `${url}/fw/ytcheck/delpoy/log/${license}`, data: params })
            .then(({ data }) => {
                if (Array.isArray(data)) {
                    setLogs(data);
                    const div = divRef.current;
                    if (div) {
                        div.scrollTop = div.scrollHeight;
                    }
                    toast.success('获取日志成功');
                }

            })
            .finally(() => {
                toast.loading_close();
            });
    }

    return (
        <div>
            <div className='flex gap-2 w-[500px]'>
                <Input style={{ width: "20%" }} placeholder="后几行" onChange={e => setN(Number(e.target.value))} value={n} />
                <AutoComplete
                    style={{ width: 200 }}
                    value={name}
                    options={logNames}
                    placeholder="日志文件名"
                    onChange={setName}
                    filterOption={(inputValue, option) =>
                        option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                    }
                    allowClear
                />
                <Button color="primary" variant="solid" onClick={getLogs}>获取日志</Button>
                <Button color="orange" variant="solid" onClick={() => divRef.current.scrollTop = divRef.current.scrollHeight}>置底</Button>
                <Button color="yellow" variant="solid" onClick={() => downloadLog()}>下载</Button>
            </div>

            {/* <Divider /> */}
            <div ref={divRef} className='px-2 py-2 mt-2' style={{
                overflowY: "auto", overflowX: "auto", height: "80vh", background: '#222', color: '#fff', width: '150vh'
            }}>
                <ul className="log-list">
                    {logs.map((log, index) => (
                        <li className='text-xs w-full' style={{ fontSize: '0.78rem' }} key={index}>{log}</li>
                    ))}
                </ul>
            </div>

        </div>
    );
};

export default Db;